<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>game1</title>
    <style media="screen">
        canvas {
            border: 1px black solid;
        }

    </style>
</head>

<body>
    <canvas id="id-canvas" width="500" height="600"></canvas>
    <script type="text/javascript" >
        var log = console.log.bind(console)

        var imageFromPath = function (path) {
            var img = new Image
            img.src = path
            return img
        }
        var Paddle = function() {
            var image = imageFromPath('paddle.png')
            var o = {
                image:image,
                x:100,
                y:400,
                speed:5
            }
            o.moveLeft = function () {
                log('move left')
                o.x -=o.speed
            }

            o.moveRight = function () {
                o.x += o.speed
            }

            o.collide = function (ball) {

                if (ball.y + ball.image.height > o.y ) {
                    if (ball.x > o.x && ball.x < o.x + o.image.width){
                        log('相撞')
                        return true
                    }
                }

                return false
            }

            return o
        }

        var Ball = function() {
            var image = imageFromPath('ball.png')
            var o = {
                image:image,
                x:100,
                y:200,
                speedX:10,
                speedY:10,
                fired: false,
            }
            o.fire = function () {
                o.fired = true
            }

           o.move = function () {
               log('ball move')
                if(o.fired)
                {
                    
                    if(o.x < 0 || o.x > 500){
                        o.speedX *=-1
                    }
                    if(o.y < 0 || o.y > 600){
                        o.speedY *=-1
                    }
                    //move
                    o.x += o.speedX
                    o.y += o.speedY
                }
           }

            return o
        }

        var GuaGame = function () {

            var g = {
                actions:{},
                keydowns:{},
            }

            var canvas = document.querySelector('#id-canvas')
            var context = canvas.getContext('2d')

            g.canvas = canvas
            g.context = context

            // draw game
            g.drawImage = function (guaImage) {

                g.context.drawImage(guaImage.image, guaImage.x, guaImage.y)

            }

            // events
            window.addEventListener('keydown', function(event){
                g.keydowns[event.key] = true
            })

            window.addEventListener('keyup', function(event){
                g.keydowns[event.key] = false
            })

            // 
            g.registerAction = function (key, callback) {
                g.actions[key] = callback
                
            }
            //timer
            setInterval(function(){
                // events
                var actions = Object.keys(g.actions)
                for (var i = 0; i < actions.length; i++){
                    var key = actions[i]
                    if(g.keydowns[key])
                    {
                        // if key down ,call callback action
                        g.actions[key]()
                    }
                }

                //update
                g.update()

                context.clearRect(0, 0, canvas.width, canvas.height)
                //draw
                g.draw()

            }, 1000/30)
            
            return g
        }
        var _main = function(){
            log('_main')
        
            var paddle = Paddle()
            var ball = Ball()
            var game = GuaGame()
           
            game.registerAction('a', function(){
                paddle.moveLeft()
            })
            game.registerAction('d', function(){
                paddle.moveRight()
            })

            game.registerAction('f', function(){
                ball.fire()
            })

            game.update = function () { 
                ball.move()  

                //判断相撞
                if (paddle.collide(ball)) {
                    ball.speedY *= -1
                    
                }             
            }
            game.draw = function (){
                //draw
                //game.context.drawImage(paddle.image, paddle.x, paddle.y)
                game.drawImage(paddle) 
                game.drawImage(ball)
            }
            }
        _main()
    </script>
</body>


</html>


    
